<template>
    <div class="bg-white p-20px m-20px rounded-12px">
        <div class="mb-8px">
            <div class="text-lg font-bold pb-20px mb-16px border-b-1 border-b-solid border-b-#eee">核销记录</div>
            <!-- <div>
                <filterComponent hideHead v-model:filter-data="filterData" @doSearch="getData" />
            </div> -->
        </div>
        <tableComponent :table-header="tableHeader" :table-data="tableData" v-model:page-info="pageInfo"
            @pageChange="handlePageChange" @sort-change="onSortChange">
            <!-- <template #image>
                <el-table-column prop="image" label="图片">
                    <template #default="scope">
                        <el-image :src="scope.row.image" alt="" class="w-40px h-40px" />
                    </template>
                </el-table-column>
            </template>
            <template #operator>
                <el-table-column prop="operator" label="操作">
                    <template #default="scope">
                        <el-button type="primary" link @click="onShowDetail(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </template> -->
        </tableComponent>
        <membershipDetail v-model:show="show" :id="id"/>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import membershipDetail from './components/membershipDetail.vue'
import type { FormDataDto } from '@/components/form-component/type'
import { getCheckedList } from '@/api/membership'
import { MemberShipCheckedDto } from '@/api/membership/type'

const tableHeader = ref([
    {
        label: '核销礼包名称',
        prop: 'giftName',
    },
    {
        label: '会员名称',
        prop: 'companyName',
    },
    {
        label: '超管',
        prop: 'superAdminName',
    },
    {
        label: '联系方式',
        prop: 'phone',
    },
    {
        label: '核销时间',
        prop: 'useTime',
        sortable: 'customer'
    },
    {
        label: '到期时间',
        prop: 'dueDate',
    },
    {
        label: '核销人',
        prop: 'writeOffUserName',
    }
])

const tableData = ref<MemberShipCheckedDto[]>([] as MemberShipCheckedDto[])

const filterData = ref<FormDataDto>({
    list: {
        memberName: {
            label: '会员名称',
            prop: 'memberName',
            value: '',
            placeholder: '请输入',
            type: 'input',
            inputType: 'text'
        },
        memberCardId: {
            label: '会员卡名称',
            prop: 'memberCardId',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'companyName',
                value: 'id'
            }
        },
        status: {
            label: '会员状态',
            prop: 'status',
            value: '',
            placeholder: '',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '待审核',
                    value: 0
                },
                {
                    label: '已通过',
                    value: 1
                },
                {
                    label: '已驳回',
                    value: 2
                },
                {
                    label: '已拒保',
                    value: 3
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
        openDate: {
            label: '开通时间',
            prop: 'openDate',
            value: '',
            type: 'date',
            dateType: 'daterange',
        }
    }
})

const pageInfo = ref({
    pageSize: 10,
    pageNum: 1,
    total: 0
})

const sort = ref({
    prop: '',
    order: ''
})

const show = ref(false)
const id = ref()

const getData = async () => {
    const res = await getCheckedList({
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
        sortField: sort.value.prop,
        sortOrder: sort.value.order,
    })
    tableData.value = res.list
    pageInfo.value.total = res.total as number
}

const onSortChange = (sortData: {
    order: string,
    prop: string
}) => {
    const map = {
        ascending: 'ASC',
        descending: 'DESC'
    }
    sort.value.order = map[sortData.order as keyof typeof map]
    sort.value.prop = sortData.order ? sortData.prop : ''
    getData()
}

const onShowDetail = (detailId: number) => {
    id.value = detailId
    show.value = true
}

const handlePageChange = () => {

}

onMounted(() => {
    getData()
})

</script>
<style lang="scss" scoped></style>
